<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构 -->
      <el-card class="tree-card">
        <tree-tools
          :treeNode="company"
          :isRoot="true"
          @addDept="addDept"
        ></tree-tools>
        <!-- 树形控件 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 传入内容 插槽内容会循环多次：有多少节点就会循环多少次 -->
          <!-- slot-scope="obj" 接收传递给插槽的数据，一个对象，解构出data属性 -->
          <!-- 先slot-scope插槽解构出data，再使用props方式传递给子组件 -->
          <!-- 父组件监听自定义事件deleteDepartment，一旦子组件删除了部门，父组件就会执行getDepartments回调函数，重新获取数据更新渲染 -->
          <tree-tools
            slot-scope="{ data }"
            :treeNode="data"
            @deleteDepartment="getDepartments"
            @addDept="addDept"
            @editDept="editDept"
          ></tree-tools>
        </el-tree>
      </el-card>
    </div>
    <!-- 放置弹出层，使用 sync修饰符 -->
    <add-dept
      :showDialog.sync="showDialog"
      :treeNode="node"
      @addDeptFinish="getDepartments"
      ref="addDeptRef"
    ></add-dept>
  </div>
</template>

<script>
// 导入组件
import TreeTools from "./components/tree-tools.vue";
// 引入API接口
import { getDepartments } from "@/api/departments.js";
// utils
import { listToTree } from "@/utils";
// 弹出框
import AddDept from "./components/add-dept.vue";

export default {
  components: {
    // 注册组件
    TreeTools,
    AddDept,
  },
  data() {
    return {
      // 头部数据结构
      company: {
        // name: "北京维卡科技有限公司",
        // manager: "负责人",
      },
      departs: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      // 新增弹出框的显示与否，默认不显示
      showDialog: false,
      //记录当前点击的node节点
      node: {},
    };
  },
  created() {
    // 调用接口获取数据
    this.getDepartments();
  },
  methods: {
    // 跟API同名的方法
    async getDepartments() {
      // 下面这个方法是引入的API
      const result = await getDepartments();
      console.log(result);
      // 头部的公司信息
      this.company = {
        name: result.companyName,
        manager:
          result.companyManage && result.companyManage !== ""
            ? result.companyManage
            : "负责人",
        id: "",
      };
      // 组织架构数据,需要将数组数据转化成树形
      this.departs = listToTree(result.depts, "");
      console.log(this.departs);
    },
    // 监听tree-tools中点击的添加子部门的事件,参数是点击的部门（要添加子部门的部门节点）
    addDept(node) {
      // 显示弹出层
      this.showDialog = true;
      this.node = node;
    },
    editDept(node) {
      // 显示弹出层
      this.showDialog = true;
      this.node = node;
      // 父组件调用子组件的方法，通过接口获取部门数据
      // 通过 ref 获取到子组件的实例对象，再调用子组件的方法
      this.$refs.addDeptRef.getDeptDetail(this.node.id)
    },
  },
};
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
